<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>视频中心</title>
    <link rel="stylesheet" href="<c:url value="/resource/wechat/css/frozen.css"></c:url>">
    <link rel="stylesheet" type="text/css" href="<c:url value="/resource/wechat/css/main.css"></c:url>"/>
    <link type="text/css" href="<c:url value='/resource/wx/newcss/common.css'/>" rel="stylesheet"/>
    <style type="text/css">

        body {
            font-size: 16px;
            margin: 0 auto;
            font-family: "微软雅黑", serif;
        }

        .ui-list-pure a {
            color: #000;
        }

        .sslk_more a {
            color: #fff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<section class="ui-container">
    <ul class="gslk">
        <li class="act" style="width: 100%" id="orgName">机构</li>
    </ul>
    <ul class="gslk_main width33">
        <c:forEach items="${result.data}" var="res">
            <li onclick="changeOrg('${res.SBID}','${res.SBORGNAME}','${res.TEMP1}')">${res.SBORGNAME}</li>
        </c:forEach>
        <li class="updown"></li>
    </ul>

    <div style="clear: both;"></div>

    <%--内容--%>
    <div style="width:100%; text-align: center;">
        <img id="img" width="100%" style="display: inline-block;"/>
    </div>

</section>
</body>
<script src="<c:url value='/resource/js/jquery-2.0.min.js'/>"></script>
<script src="<c:url value='/resource/wechat/js/zepto.min.js'/>"></script>
<script src="<c:url value='/resource/js/common.js'/>"></script>
<script type="text/javascript">

    // 选择不同的机构
    var changeOrg = function (id, name, state) {
        $(".gslk_main").slideUp();
        $(".gslk .act").removeClass("hov");
        $("#orgName").html(name);//赋值
        if(state=="否") {
            toast("监控设备没有上线!!");
            $("#img").attr("src", "");//清空
            return;
        }

        $.ajax({
            url: "<c:url value='/api/media/ajax/getVideoImg'/>",
            dataType: "json",
            data: {"id": id},
            success: function (res) {

                if (res.succ == true && res.data != "") {
                    var picaddress = res.data[0].PICADDRESS;
                    $("#img").attr("src", picaddress);
                } else {
                    toast("没有获取到视频图片!!");
                    $("#img").attr("src", "");//清空
                }
            },
            error: function () {
                toast("获取视频图片失败!!");
                $("#img").attr("src", "");//清空
            }
        })
    };

    $(function () {
        /*点击事件，动态显示下拉*/
        $(".gslk .act").click(function () {
            $(this).addClass("hov");//高亮
            if ($(".gslk_main").css("display") == "block") {
                $(".gslk_main").slideUp();//隐藏选择项
                $(this).removeClass("hov");
            } else {
                $(".gslk_main").slideDown();//显示下拉选择项
            }
        });

        $(".updown").click(function () {
            $(".gslk_main").slideUp();
            $(".gslk .act").removeClass("hov");
        });
    })


</script>

</html>